<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" :close-on-click-modal="false" width="800px" top="8vh" :before-close="handleClose">
			<div class="tab">
				<div style="margin-bottom: 15px;">
					订单基础信息
				</div>
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<el-form-item label="产品名称" prop="product_name">
						<el-input v-model="form.product_name" :disabled="num == 3" placeholder="请输入产品名称"></el-input>
					</el-form-item>
					<el-form-item label="MODEL" >
						<el-input v-model="form.project_name" :disabled="num == 3" placeholder="请输入MODEL"></el-input>
					</el-form-item>
					<el-form-item label="里程碑" prop="milepost">
						<el-select v-model="form.milepost" placeholder="请选择里程碑" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in milepostOptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="客户属性" prop="customer_type">
						<el-select v-model="form.customer_type" placeholder="请选择客户属性" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in options"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="客户" prop="customer">
						<el-select v-model="form.customer" placeholder="请选择客户" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in customerOptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产品线" prop="product_line">
						<el-select v-model="form.product_line" placeholder="请选择产品线" style="width:100%;" @change="productLine" :disabled="num == 3">
							<el-option
								v-for="item in productLineOptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产品" prop="product">
						<el-select v-model="form.product" placeholder="请选择产品" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in productOptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="测试组" prop="group">
						<el-select v-model="form.group" placeholder="请选择产品" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="(item,index) in groupOptions"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="品牌属性">
						<el-select v-model="form.brand_type" placeholder="请选择状态" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in brandTypeoptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="联网方式">
						<el-select v-model="form.networking_mode" placeholder="请选择状态" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in networkingModeoptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="测试内容">
						<el-select
							v-model="form.test_content"
							placeholder="请选择测试内容"
							multiple
							style="width:100%;"
							:disabled="num == 3">
							<el-option
								v-for="(item,index) in testOption"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="测试服务器">
						<el-input v-model="form.server" :disabled="true" placeholder="请输入测试服务器"></el-input>
					</el-form-item>
					<el-form-item label="销售区域" >
						<el-select
							v-model="form.sales_area"
							@change="areaChange"
							placeholder="请选择销售区域"
							filterable
							style="width:100%;"
							:disabled="num == 3">
							<el-option
								v-for="(item,index) in salesOption"
								:key="index"
								:label="item.name+'-'+'('+item.server+')'"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="样机" >
						<el-select
							v-model="form.prototype"
							placeholder="请选择样机"
							multiple
							value-key="id"
							@change="protoChange"
							style="width:100%;"
							:disabled="num == 3">
							<el-option
								v-for="(item,index) in prototypeOption"
								:key="index"
								:label="item.name"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="计划提测时间">
						<el-date-picker
							v-model="time"
							type="datetimerange"
							:picker-options="pickerOptions"
							range-separator="至"
							start-placeholder="计划开始提测时间"
							end-placeholder="计划结束提测时间"
							style="width: 100%;"
							@change="dataChange"
							:disabled="status != 0"
							align="right">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="实际提测时间">
						<el-date-picker
							v-model="form.actual_start_time"
							type="datetime"
							style="width: 100%;"
							placeholder="选择实际提测时间">
						</el-date-picker>
					</el-form-item>
				</el-form>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')" v-if="num != 3">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
import {orderOptions,productList,manufactorList,productLineList,
	groupList,prototypeList} from '@/api/user'
export default {
	name: 'addForm',
	data(){
		return {
			dialogFormVisible:false,
			form:{
				test_content:[]
			},
			time:[],
			formSure:{},
			id:'',
			status:'',
			rules:{
				project_name:{required: true, message: '请输入项目名称', trigger: 'blur' },
				milepost: [{ required: true, message: '请选择里程碑', trigger: 'change' }],
				customer_type:[{ required: true, message: '请选择客户类型', trigger: 'change' }],
				customer:[{ required: true, message: '请输入客户', trigger: 'blur' }],
				product_line:{ required: true, message: '请输入产品线', trigger: 'blur' },
				product:{ required: true, message: '请输入产品', trigger: 'change' },
				group:{ required: true, message: '请输入产品', trigger: 'blur' },
				test_content:[{ required: true, message: '请选择测试内容', trigger: 'change' }],
				sales_area:[{ required: true, message: '请选择销售区域', trigger: 'change' }]
			},
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			options:[],
			num:0,
			title:'编辑',
			optionsLeader:[],
			milepostOptions:[],
			testOption:[],
			productOptions:[],
			customerOptions:[],
			productLineOptions:[],
			groupOptions:[],
			initTableList:[],
			salesOption:[],
			prototypeOption:[],
			serverOption:[],
			brandTypeoptions:[],
			networkingModeoptions:[],
			activeNames:1
		}
	},
	created() {

	},
	methods:{
		// 服务器选择事件
		areaChange(e){
			this.salesOption.filter(item => {
				if(item['name'] == e){
					this.form.server = item['server']
					console.log(item,3434343)
				}
			})
		},
		protoChange(e){
			console.log(e)
		},
		productLine(e){
			this.productLineOptions.filter(item => {
				if(item['name'] == e){
					var data = item['id']
					productList(data).then(res => {
						console.log(res.data,565656)
						this.productOptions = res.data
					})
				}
			})
		},
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
			this.milepostOptions = []
			this.testOption = []
			this.productOptions = []
			this.customerOptions = []
			this.productLineOptions = []
			this.groupOptions = []
			this.salesOption = []
			this.prototypeOption = []
			this.serverOption = []
			this.brandTypeoptions = []
			this.networkingModeoptions = []
			this.form.time = []
		},
		add(form){
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.formSure.prototype = []
					if(this.num == 2){
						this.productLineOptions.filter(item => {
							if(this.form.product_line == item['name']){
								this.formSure.product_line = item['id']
							}
						})

						this.productOptions.filter(item => {
							if(this.form.product == item['name']){
								this.formSure.product = item['id']
							}
						})

						this.groupOptions.filter(item => {
							if(this.form.group == item['name']){
								this.formSure.group_id = item['id']
							}
						})

						this.form.prototype.forEach(item2 => {
								this.formSure.prototype.push(item2['id'])
						})

						console.log(this.form,232332)
						console.log(this.formSure,343434)

						this.formSure.milepost = this.form.milepost
						this.formSure.customer_type = this.form.customer_type
						this.formSure.project_name = this.form.project_name
						this.formSure.customer = this.form.customer
						this.formSure.test_content = this.form.test_content
						this.formSure.sales_area = this.form.sales_area
						this.formSure.server = this.form.server
						this.formSure.brand_type = this.form.brand_type
						this.formSure.networking_mode = this.form.networking_mode
						this.formSure.start_time = this.form.start_time
						this.formSure.end_time = this.form.end_time
						this.formSure.actual_start_time = this.form.actual_start_time

						console.log(this.formSure,1212121)
						var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/order/${this.id}`;
						var data = this.formSure
						this.$axios.post(source,data,{headers: getHeader()})
							.then((response) => {
								console.log(response,12121)
								if (response.data.status == 'success') {
									this.dialogFormVisible = false
									this.$parent.initTable()
									this.$message.success("修改成功!")
								}else {
									this.$message.error(response.data.message)
									this.dialogFormVisible = false
								}
								this.form ={}
								this.milepostOptions = []
								this.testOption = []
								this.productOptions = []
								this.customerOptions = []
								this.productLineOptions = []
								this.groupOptions = []
								this.salesOption = []
								this.prototypeOption = []
								this.brandTypeoptions = []
								this.networkingModeoptions = []
							}).catch((err) => {
							console.log(err);
						});
					}

				} else {
					return false;
				}
			});

		},
		dataChange(e){
			console.log(e,4545454)
			this.form.start_time = e[0]
			this.form.end_time = e[1]

		},
		initData(num,data){
			this.num = num
			this.id = data._id
			this.status = data.status

			let arr = []

			console.log(data,676767)

			var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/manufactor/type`;
			this.$axios.get(source,{headers: getHeader()})
				.then((response) => {
					if (response.status == 200) {
						var res = response.data.data
						var arr = []
						res.forEach(item => {
							arr.push({name:item})
						})
						this.options = arr
					}
				}).catch((err) => {
				console.log(err);
			});

			manufactorList().then(res => {
				this.customerOptions = res.data
			})

			productLineList().then(res => {
				this.productLineOptions = res.data

			})

			productList().then(res => {
				this.productOptions = res.data
			})

			groupList().then(res => {
				this.groupOptions = res.data
				console.log(res.data,78787)
			})

			orderOptions().then(res => {
				var data = res.data

				data.mileposts.filter(item => {
					this.milepostOptions.push({name:item})
				})

				this.salesOption = data.sales_area_list

				data.test_content_list.filter(item => {
					this.testOption.push({name:item})
				})

				data.server_list.filter(item => {
					this.serverOption.push({name:item})
				})

				data.brand_type_list.filter(item => {
					this.brandTypeoptions.push({name:item})
				})

				data.networking_mode_list.filter(item => {
					this.networkingModeoptions.push({name:item})
				})

				prototypeList().then(res => {
					console.log(res.data,898989)
					res.data.filter(item => {
						this.prototypeOption.push({id:item['id'],name:item['name']})
					})
					// this.prototypeOption = res.data
					console.log(this.prototypeOption,101010101)
				})

				this.productLineOptions.filter(item => {
					console.log(item,45454)
					if(this.form.product_line == item['name']){
						var data = item['id']
						productList(data).then(res => {
							this.productOptions = res.data
						})
					}
				})
			})


			this.form = Object.assign({},data)
			arr.push(data.start_time,data.end_time)
			this.time = arr
			// this.form.time.push(data.end_time)
			this.form.product = data.product['name']
			this.form.product_line = data.product_line['name']
			this.form.group = data.group['name']

			this.form.test_content = []
			data.test_content.filter(item => {
				this.form.test_content.push(item['test_content'])
			})

			// this.form.sales_area = []
			// data.sales_area.filter(item => {
			// 	this.form.sales_area.push(item['sales_area'])
			// })

			// this.form.server = []
			// data.server.filter(item => {
			// 	this.form.server.push(item['server'])
			// })
		}
	}

}
</script>

<style lang="scss" scoped>
.role{

}
.testTable{
	height: 430px;
	overflow:scroll;
}
</style>
